<template>
<div style="position:relative;min-height:24px;line-height:23px;" class="ivu-select ivu-select-selection">
    <div style="padding-left:5px;padding-right:20px;font-size:12px;">
        <div v-if="nestLabels.length>0" style="">
            <label v-if="multiselect" v-for="(item, index) in nestLabels" :key="index" style="border:1px solid #ddd;background-color:#f8f8f8;padding:0 5px;margin-right:5px;">
                {{item}}
                <span>x</span>
            </label>
            <span v-else style="display:inline-block;width:90%;text-overflow: ellipsis;-moz-text-overflow: ellipsis; overflow: hidden;white-space: nowrap;">{{nestLabels}}</span>
        </div>
        <div v-else-if="nestLabels==0" style="font-color=#888">未选择</div>
    </div>
    <Dropdown size="small" placement="bottom-end" trigger="click" :title="nestLabels" class="ivu-select"
        style="position:absolute;top:0;right:0;height:24px;line-height:23px;"
        @on-click="handleClick">
        <Icon type="ios-arrow-down" style="position:absolute;top:5px;right:5px;color:#888"></Icon>
        <DropdownMenu slot="list">
            <template v-for="(item, index) in formatedOptions">
                <DropdownItem v-if="!item.children" :key="index" :name="item._index" :selected="item.value==values[depth]">{{item.label}}</DropdownItem>
                <nest-select-sub-item v-else-if="item.children" 
                :values="values"
                :value="item.value"
                :_index="item._index" :key="index" 
                :options="item.children" 
                :label="item.label" 
                :depth="depth + 1"></nest-select-sub-item>
            </template>
        </DropdownMenu>
    </Dropdown>
</div>
</template>

<script>
import NestSelectSubItem from './NestSelectSubItem.vue';

export default {
    name: "nest-select",
    props: {
        value: {
            type: Array,
            default: () => []
        },
        options: {
            type: Array,
            default: () => []
        },
        multiselect: {
            type: Boolean,
            default: false
        }
    },
    components: {
        NestSelectSubItem
    },
    data() {
        return {
            values: this.multiselect ? [this.value] : this.value,
            label: "",
            depth: 0
        }
    },
    computed: {
        nestLabels() {
            var temp = [];
            for(var i = 0; i < this.values.length; i++) {
                temp.push(this.getNestLabels(this.depth, this.values[i], this.formatedOptions));
            }
            return temp;
        },
        formatedOptions() {
            var temp = this.formatOptions(0, this.options);
            return temp;
        }
    },
    methods: {
        handleClick(index) {
            if(this.multiselect) {
                this.values.push(this.getValue(index, this.formatedOptions));
                this.$emit("input", this.values);
            }else{
                this.values = [this.getValue(index, this.formatedOptions)];
                this.$emit("input", this.values[0]);
            }
        },
        getValue(index, options) {
            for(var i = 0; i < options.length; i++) {
                var option = options[i];
                if(option._index == index) {
                    return [option.value];
                }else if(option.children){
                    var temp = this.getValue(index, option.children);
                    if(temp.length) {
                        return [option.value].concat(temp);
                    }
                }
            }
            return [];
        },
        getNestLabels(depth, values, options) {
            if(depth >= values.length) return "";
            for(var i = 0; i < options.length; i++) {
                var option = options[i];
                if(option.value == values[depth]) {
                    if(option.children) {
                        return option.label + '-' + this.getNestLabels(depth + 1, values, option.children);
                    }else {
                        return option.label;
                    }
                }
            }
            return "";
        },
        formatOptions(index, options) {
            var temp = [];
            for(var i = 0; i < options.length; i++) {
                var option = options[i];
                var tempOption = Object.assign({
                    _index: `${index}-${i}`
                }, option);
                if(option.children) {
                    tempOption.children = this.formatOptions(tempOption._index, option.children);
                }
                temp.push(tempOption);
            }
            return temp;
        }
    }
}
</script>
